﻿<div class="message-placeholder"></div>
<div class="authoring-edit-image authoring-profile-image" id="avatar">
    <img src="@Model.AvatarUrl" alt="avatar"/>
    @T("Click to change")
</div>
<div class="authoring-text-fields">
    <div class="nineseas-field-label">@T("Status")</div>
    <div class="nineseas-field-input">
        <textarea id="txtStatus" name="txtStatus" cols="15">@Model.Profile.StatusMessage</textarea>
    </div>
    <div style="float: left;">
        <div class="nineseas-field-label">@T("Display Name")</div>
        <div class="nineseas-field-input">
            <input type="text" id="txtDisplayName" name="txtDisplayName" style="width: 180px;" value="@Model.Profile.DisplayName"/>
        </div>
    </div>
    <div style="float: right; text-align:right;">
        <div class="nineseas-field-label">@T("Date of birth")</div>
        <div class="nineseas-field-input">
            <input type="text" id="txtDateOfBirth" name="txtDateOfBirth" readonly="readonly" value="@Model.Profile.DateOfBirth"/>
        </div>
    </div>
    <div style="clear: both;"></div>
    <div class="nineseas-field-label">@T("Email")</div>
    <div class="nineseas-field-input">
        <input type="text" id="txtEmail" name="txtEmail" value="@Model.User.Email"/>
    </div>
    <div class="nineseas-field-label">@T("Phone")</div>
    <div class="nineseas-field-input">
        <input type="text" id="txtPhone" name="txtPhone" value="@Model.Profile.Phone"/>
    </div>
</div>
<div style="clear: both;"></div>
<div class="nineseas-field-label" style="margin-top: 20px;">@T("Select the banner color")</div>
<div id="bannerColor"></div>
<input type="hidden" id="avatarStoragePath" value="@Model.Profile.AvatarStoragePath" />
<script type="text/javascript">
    $(function () {
        $("#txtDateOfBirth").datepicker({
            changeMonth: true,
            changeYear: true,
            dateFormat: "dd/mm/yy",
            yearRange: "1900:2100"
        });
        $("#bannerColor").colorpicker();
        $("#bannerColor").colorpicker("select", "@Model.Profile.BannerColor");

        var token = "@Html.AntiForgeryTokenValueOrchard()";
        $.commandBar('#nineseas-reader-footer', {
            left: [],
            right: [{
                id: 'saveButton',
                caption: '@T("Save")',
                onClick: function () {
                    // validate
                    if ($.trim($("#txtDisplayName").val()).length == 0) {
                        alert("@T("The Display Name field is required.")");
                        $("#txtDisplayName").focus();

                        return;
                    }
                    // collect the form data
                    var data = {
                        statusMessage: $("#txtStatus").val(),
                        displayName: $("#txtDisplayName").val(),
                        dateOfBirth: $("#txtDateOfBirth").val(),
                        email: $("#txtEmail").val(),
                        phone: $("#txtPhone").val(),
                        bannerColor: $("#bannerColor").colorpicker("getSelectedValue"),
                        avatarStoragePath: $('#avatarStoragePath').val(),
                        '__RequestVerificationToken': token
                    };

                    $.post('authoring/editprofile', data, function (result) {

                        if (result.newToken) {
                            token = result.newToken;
                        }

                        if (result.success) {

                            alert("@T("Saved successfully!")");

                            if ($("#authoring-tabs").length > 0) {
                                $("#authoring-tabs").tabs("enable");
                            }
                        } else {
                            alert("@T("An error has occurred while trying to save the data!")");
                        }
                    });
                }
            }]
        });     
        
        $('#avatar').mediaUploadButton({
            'action': '@Url.Action("Avatar", "Upload")',
            'mediaName': 'avatar',
            data: {
                '__RequestVerificationToken': token
                },
            callback: function (result) {
                if (result.success && result.filePath) {
                    $('#avatar img').attr('src', result.publicUrl);
                    $('#avatarStoragePath').val(result.filePath);
                } else if (result.message) {
                    alert(result.message);
                }
            }
        });
    });
</script>